<template>
	<view class="page">
		<view class="Release_box">
			<form @submit="" @reset="">
				<view class="orderItem release_postion" @click="handleItem">
					服务项目：<text>请选择服务项目</text><uni-icons class="position_icon" type="forward" size="24" color="#b3b3b3"></uni-icons>
				</view>
				<view class="orderItem release_time">
					服务日期	： <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChangeDate">
						<view class="">{{date}}</view>
						<uni-icons class="position_icon" type="forward" size="24" color="#b3b3b3"></uni-icons>
					</picker>
				</view>
				<view class="orderItem release_time">
					服务时间	： <picker :value="index" :range="time"  @change="bindDateChangeTime">
						<view class="">{{time[index]}}</view>
						<uni-icons class="position_icon" type="forward" size="24" color="#b3b3b3"></uni-icons>
					</picker>
				</view>
				<view class="orderItem release_wages">
					需求预算： <input type="text" v-model="formData.money" placeholder="不报价(跟进服务方面议)、面议" />
				</view>
				<view class="orderItem release_postion" @click="handleAddress">
					服务地址： <view>点击选择</view>
					<uni-icons class="position_icon" type="forward" size="24" color="#b3b3b3"></uni-icons>
				</view>
				<view class="release_describe">
					需求描述：<textarea class="textarea" placeholder="请详细描述您的需求，以便更快解决您的问题" placeholder-style="color:#B3B3B3" maxlength="500"
					 @input="" v-model="desc" />
					</view>
				<button class="bt" form-type="submit" @click="infoPay"><image src="/static/img/publish_icon.png"></image> 发布需求</button>
			</form>
		</view>

	</view>
</template>

<script>
	// 时间框

	export default {
		components: {},
		data() {
			const currentDate = this.getDate({
					format: true
			})
			return {
				index: 0,
				title: '',
				date: currentDate,
				isShow: false,
				time: ['08:00-09:00','09:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00','14:00-15:00','16:00-17:00',,'17:00-18:00']
			}
		},
		// 获取需求大厅的需求名字
		onLoad(option) {
			this.title = option.e
		},
		methods: {
			// 打开时间列表
			handleAddress () {
				uni.navigateTo({
					url: "/pages/my/my_address/my_address"
				})
			},
			handleItem () {
				uni.navigateTo({
					url: "/pages/my/my_order/demandHall"
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			bindDateChangeDate (e) {
					this.date = e.target.value
			},
			bindDateChangeTime (e) {
				this.index = e.target.value
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();

					if (type === 'start') {
							year = year - 60;
					} else if (type === 'end') {
							year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		overflow: hidden;
	}

	.Release_box {
		padding: 33rpx 33rpx 0;
		box-sizing: border-box;
		.release_type,.release_postion,.release_time,.release_wages,.release_describe {
			position: relative;
			display: flex;
			padding: 33rpx 0;
			padding-top: 0;
			margin-bottom: 33rpx;
			color: #B3B3B3;
			font-size: 32rpx;
			border-bottom: 1px solid #E2E2E2;
			text {
				padding-left: 20rpx;
				color: #565656;
			}
			picker {
				flex: 1;
				margin-left: 20rpx;
				line-height: 47rpx;
				font-size: 32rpx;
				color: #565656;
				.uni-icons {
					margin-left: 40rpx;
				}
			}
			.position_icon {
				position: absolute;
				right: 0;
				top: 0%;
			}
			input {
				width: 500rpx;
				padding-left: 20rpx;
				font-size: 32rpx;
			}
		}
		.release_describe{
			display: block;
			border-bottom: none;
			.textarea {
				width: 100%;
				height: 220rpx;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				padding: 10rpx 17rpx;
				border: 2rpx #E2E2E2 solid;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #B3B3B3;
			}
		}
	}
	.bt {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 117rpx;
		line-height: 117rpx;
		background-color:#368AFF;
		margin: 0 auto;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		border-radius: 0;
		vertical-align: middle;
		image {
			position: relative;
			top: -2px;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			margin-right: 17rpx;
		}
	}
</style>
